<template>
    <div class="header">
        <div class="logo">
            <div v-if="!collapse" style="width:250px;" @click='back'>
                <router-link to="/home"><img src="../../assets/img/logo.png" /></router-link>
            </div>
            <div v-else style="width:64px" @click='back'>
                <router-link to="/home"><img src="../../assets/img/logo-min.png" /></router-link>
            </div>
        </div>
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="menuTop"  v-if="true">
            <div class='modelChange'>
                <div class='style-box'>
                    <span class="modelName">{{switchHeadTab == '中药饮片'?'中药饮片系统':'配方颗粒系统'}}</span>
                    <el-button type='primary' class='btn'  round @click="changeModel">
                        <i class='el-icon-refresh'></i>
                        <span class='text'>切换</span>
                    </el-button>
                </div>
            </div>
        </div>
        <div class="header-right">
            <div class="header-user-con">
                <!-- 全屏显示 -->
                 <!-- <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                         <i class="el-icon-rank"></i>

                     </el-tooltip>
                </div> -->
                <div class="btn-fullscreen" @click="handleSystem" v-if="show1">
                    <i class="el-icon-s-tools"></i>
                    系统设置
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell" style="width: 60px">
                    <el-badge class="item">
                        <span class="hot">{{this.$store.state.num}}</span>
                        <router-link to="/message">
                            消息
                        </router-link>
                    </el-badge>
                    <!-- <el-tooltip
                        effect="dark"
                        :content="message?`有${message}条未读消息`:`消息中心`"
                        placement="bottom"
                    >
                        <router-link to="/tabs">
                            <i class="el-icon-bell"></i>
                            消息
                        </router-link>
                    </el-tooltip>
                    <span class="btn-bell-badge" v-if="message"></span> -->
                </div>
                <!-- 用户头像 -->
                <div class="user-avator">
                    <!-- <img src="../../assets/img/img.jpg" /> -->
                    {{usernameImg}}
                </div>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <!-- <i class="el-icon-caret-bottom"></i> -->
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item divided command="goone">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <pop-model-change  :show='popShow' :mask-close='false'>
            <div class='box-switch'>
                <div class='item' @click='handleproduct'>
                    <img class="img" src='@/assets/img/配方颗粒@2x.png'/>
                    <div class='text-box' >
                        <p>配方颗粒系统</p>
                        <span>进入<i class="el-icon-arrow-right"></i></span>
                    </div>
                </div>
                <div class='item' @click='changeRouter'>
                    <img class="img" src='@/assets/img/中药饮片系统@2x.png'/>
                    <div class='text-box'>
                        <p>中药饮片系统</p>
                        <span>进入<i class="el-icon-arrow-right"></i></span>
                    </div>
                </div>
            </div>
        </pop-model-change>
    </div>
</template>
<script>
import bus from '../common/bus';
import { message_getmessage, switchSystem } from '@/request/api';
import {mapState,mapMutations} from 'vuex';
import popModelChange from '@/components/common/popModelChange.vue';
export default {
    inject: ['reload'],
    components:{
        popModelChange
    },
    data() {
        return {
            popShow:{flag:false},
            collapse: false,
            fullscreen: false,
            name: 'linxin',
            message: 2,
            usernameImg: '',
            num:0,
            show1:true
        };
    },
    computed: {
        ...mapState(['switchHeadTab']),
        username() {
            let username = localStorage.getItem('ms_username');
            this.usernameImg = username.substring(0,1)
            return username ? username : this.name;

        }
    },
    methods: {
        ...mapMutations(['setSwitchHeadTab']),
        back(){
            if(this.switchHeadTab == '生产系统'){
                localStorage.setItem("ide","qqq")
                this.reload();
                this.$router.push("/home")
                this.$nextTick(()=>{
                    this.setSwitchHeadTab('生产系统')
                })
            }else {
                localStorage.setItem("ide","qqq")
                this.reload();
                this.$router.push("/home")
                this.$nextTick(()=>{
                    this.setSwitchHeadTab('中药饮片')
                })
            }

        },
        changeModel(){
            this.popShow = {flag:true}
        },
        changeRouter(){
            localStorage.setItem("ide","qqq")
            this.reload()
            this.$router.push("/home")
            this.$nextTick( async ()=>{
                console.log('执行切换中药饮片');
                this.setSwitchHeadTab('中药饮片')
                const res = await switchSystem('2')
            })
        },
        init(){
            message_getmessage("").then((res)=>{
                this.$store.commit("setnum",res.data)
            })
        },
        // goone(){
        //     console.log(111)
        //     this.$router.push('/personage')
        // },
        // handlesys(goone){
        //     console.log(111)
        //     this.$router.push('/personage')
        // },
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
                this.$router.push('/login');
                this.$store.commit('setHasShow',false)
                this.$store.commit('setSwitchHeadTab','生产系统')
            }
            if(command == "goone") {
                // localStorage.setItem("ide","zxc")
                this.reload();
                this.$router.push('/personage')
            }
        },
        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        // 点击前往系统设置
        handleSystem(){
            this.$confirm("是否确定进入系统设置？","提示",{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
            }).then(confirm=>{
                localStorage.setItem("ide",'qwe')
                this.reload();
                var r = this.$store.state.tzxtsz

                if(r.length == 0){
                    this.$router.push({
                        path:'/system403'
                    })
                }else{
                    this.$router.push({
                        path:r[0].index
                    })
                }
            }).catch(cancel=>{

            })

        },
         handleproduct(){
            localStorage.setItem("ide","qqq")
            this.reload();
            this.$router.push("/home")
            this.$nextTick(async ()=>{
                console.log('执行切换生产系统');
                this.setSwitchHeadTab('生产系统')
                const res = await switchSystem('1')
            })
        },
        // 全屏事件
        // handleFullScreen() {
        //     let element = document.documentElement;
        //     if (this.fullscreen) {
        //         if (document.exitFullscreen) {
        //             document.exitFullscreen();
        //         } else if (document.webkitCancelFullScreen) {
        //             document.webkitCancelFullScreen();
        //         } else if (document.mozCancelFullScreen) {
        //             document.mozCancelFullScreen();
        //         } else if (document.msExitFullscreen) {
        //             document.msExitFullscreen();
        //         }
        //     } else {
        //         if (element.requestFullscreen) {
        //             element.requestFullscreen();
        //         } else if (element.webkitRequestFullScreen) {
        //             element.webkitRequestFullScreen();
        //         } else if (element.mozRequestFullScreen) {
        //             element.mozRequestFullScreen();
        //         } else if (element.msRequestFullscreen) {
        //             // IE11
        //             element.msRequestFullscreen();
        //         }
        //     }
        //     this.fullscreen = !this.fullscreen;
        // }
    },
    mounted() {
        var userType =  localStorage.getItem("userType")
        if(userType == 1){
            this.show1 = false
        }else{
            this.show1 = true
        }
        this.init()
        if (document.body.clientWidth < 1200) {
            this.collapseChage();
        }
        bus.$once('showSystemPop',(flag)=>{
            this.popShow.flag = flag
            this.$store.commit('setHasShow',true)
        })
        if(this.$store.state.hasShow){
            bus.$off('showSystemPop')
        }
    }
};
</script>
<style lang='less' scoped>

.box-switch{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .item{
        padding: 10px;
        margin: 10px;
        background-color: #FFFFFF;
        border-radius: 10px;
        cursor: pointer;

        .img{
            width: 200px;
        }
        .text-box{
            text-align: center;
            font-size: 16px;
            p{
                margin-bottom: 5px;
            }
            span{
                color: #2d8cf0;
                font-size: 14px;
            }
        }
    }
}

.modelChange{
    font-size: 16px;
    height: 70px;
    display: flex;
    align-items: center;
        .style-box{
            background-color: #ebf2fc;
            border-radius: 20px;
            border: 1px solid #2d8cf0;
            .modelName{
                color: #409EFF;
                padding: 20px 15px 20px 20px;
                //margin-right: 32px;
            }
            .btn{
                width: 41px;
                height: 30px;
                .text{
                    margin-left: 14px;
                }
                &:hover{
                    width: 80px;
                }
                &:hover .text{
                    margin-left: 5px;

                }
                &:hover .el-icon-refresh {
                    transition: all 1s !important;
                    transform: rotateZ(180deg);
                    transform-origin: 50% 45%;
                }
            }

        }
}
.text-hover{
    color: #606266;
    &:hover{
        color: #409EFF;
    }
}
.textActive{
    color: #409EFF;
}
.header {
    position: relative;
    box-sizing: border-box;
    /* width: 100%; */
    /* min-width:1200px; */
    height: 70px;
    font-size: 22px;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.collapse-btn:hover{
    background: #eee;
}
.header .logo {
    float: left;
    height: 100%;
    line-height: 4;
    text-align: center;
}
.header .menuTop{
    float: left;
}
.header .menuTop ul li{
    //float: left;
    //padding-left: 15px;
    //line-height: 70px;
    //font-size: 14px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.btn-fullscreen {
    /* transform: rotate(45deg); */
    margin-right: 5px;
    font-size: 13px;
}
.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 80px;
    /* height: 30px; */
    line-height: 10px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #000;
}
.btn-bell a{
    font-size: 13px;
    color: #000;
}
.btn-bell .item .hot{
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
}
.user-name {
    margin-left: 10px;
}
.user-avator {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background:#909399;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-left: 10px;
    font-size: 14px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.el-dropdown-link {
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
</style>
